<template>
  <div>
    <myinput v-model="searchMsg"/>
    <myButton @click="search" show-icon icon="icon-sousuo">
      
    </myButton>
    
    
    <myButton width="150" @click="$refs.SimpleDialog.visible=true">添加</myButton>
    <SimpleDialog ref="SimpleDialog" @confirm="addArticle"></SimpleDialog>
    <SimpleDialog ref="editDialog" @confirm="editItem"></SimpleDialog>
    

    <div class="container">
      <div class="title">
        <div class="item">文章ID</div>
        <div class="item">文章标题</div>
        <div class="item">文章标签</div>
        <div class="item">作者</div>
        <div class="item">操作</div>
      </div>
      <div class="content" v-for="(obj,index) in articleList" :key="index">
        <div class="item">{{obj.id}}</div>
        <div class="item">{{obj.title}}</div>
        <div class="item">{{obj.label}}</div>
        <div class="item">{{obj.author}}</div>
        <div class="item">
          <myButton @click="showEditDialog(index)">编辑</myButton>
          <myButton class="delete-btn" @click="deleteArticle(index)" type="danger">删除</myButton>
        </div>
      </div>
    </div>
  </div>
</template>

<script>
import myinput from "../3.23/myInput2.vue";
import SimpleDialog from "../3.28_3.30/SimpleDialog.vue";
import myButton from "../3.21/myButton.vue";
export default {
  components: {
    myinput,
    SimpleDialog,
    myButton
  },
  data() {
    return {
      articleList: [
        {
          id: "001",
          title: "习近平谈治国理政",
          label: "政治",
          author: "习近平",
          checked: false
        },
        {
          id: "003",
          title: "明朝那些事儿",
          label: "历史",
          author: "当年明月",
          checked: false
        },
        {
          id: "003",
          title: "Vue3.x",
          label: "计算机",
          author: "尤雨溪",
          checked: false
        }
      ],
      articleList2: [
        {
          id: "001",
          title: "习近平谈治国理政",
          label: "政治",
          author: "习近平",
          checked: false
        },
        {
          id: "003",
          title: "明朝那些事儿",
          label: "历史",
          author: "当年明月",
          checked: false
        },
        {
          id: "003",
          title: "Vue3.x",
          label: "计算机",
          author: "尤雨溪",
          checked: false
        }
      ],
      searchMsg:"",
      editIndex:0,
      allChecked:false,
    };
  },
  methods: {
    search(){
      if(this.searchMsg){
        this.articleList=this.articleList2.filter((item)=>{
          return item.title===this.searchMsg;
        });
      }else{
        this.articleList=this.articleList2;
      }
      
    },
    addArticle(item) {
      this.articleList.push(item);
    },
    deleteArticle(index) {
      this.articleList.splice(index, 1);
    },
      showEditDialog(index) {
        this.editIndex=index;
        this.$refs.editDialog.show(this.articleList[index]);
      },
      editItem(data){
          for(let key in data){
              this.articleList[this.editIndex][key]=data[key];
          }
      },
  },
};
</script>
<style scoped>
.title {
  display: flex;
  text-align: center;
  background: #f2f2f2;
  border-bottom: 1px solid #eee;
  padding: 0 10px;
}
.content {
  display: flex;
  background: white;
  border-bottom: 1px solid #eee;
  padding: 0 10px;
  text-align: center;
}
.item {
  flex: 1;
  height: 50px;
  line-height: 50px;
}
</style>